<script setup lang="ts">
  import { nextTick, PropType, ref } from 'vue'
  import { DataConnectTableFieldType, DataConnectTable } from '../../../hooks/types'
  import { TableInstance } from 'element-plus'
  import _ from 'lodash'

  defineOptions({
    name: 'OrderCustomFormGoodSelectModal',
  })

  const props = defineProps({
    // 选择时显示的字段
    showFieldList: {
      type: Array as PropType<Array<DataConnectTableFieldType>>,
      default: () => [],
    },

    // 选择方式：1-多选，2-单选
    selectMode: {
      type: Number as PropType<1 | 2>,
      default: () => 1,
    },
  })

  const emits = defineEmits<{
    (e: 'update', value: DataConnectTable): void
  }>()

  // 弹窗显示状态
  const visible = defineModel('modelValue', { type: Boolean, default: false })

  // 产品列表
  const list: DataConnectTable = [
    {
      id: '1',
      goodName: 'S100B轮式管道检测机器人本体',
      goodCode: 'SB9100B0001',
      goodSpec: 'SD9100B1,SD91008-MAS-000',
      goodUnit: 'Pcs',
      goodClassify: '产成品-机器人本体、声呐',
      goodCreateTime: '2022-12-12 09:47',
      goodUpdateTime: '2024-12-08 10:28',
    },
    {
      id: '2',
      goodName: '前置防水云台AHD高清变焦摄像机',
      goodCode: 'CC1090F0001',
      goodSpec: 'SD1090F1,SD1090F1-MAS-000',
      goodUnit: 'Pcs',
      goodClassify: '产成品-云台摄像机、潜望镜',
      goodCreateTime: '2020-07-29 19:52',
      goodUpdateTime: '2024-12-08 10:28',
    },
    {
      id: '3',
      goodName: '1000米光纤线机器人控制线缆卷盘',
      goodCode: 'CR6500D0001',
      goodSpec: 'SD6500D，SD6500D-MAS-000',
      goodUnit: 'Pcs',
      goodClassify: '产成品-推杆卷盘、电缆卷盘',
      goodCreateTime: '	2023-10-09 18:01',
      goodUpdateTime: '2024-12-08 10:28',
    },
    {
      id: '4',
      goodName: '650便携式硬质推杆卷盘（90M）',
      goodCode: 'CRP665B0003',
      goodSpec: 'SDP665B1',
      goodUnit: 'Pcs',
      goodClassify: '产成品-推杆卷盘、电缆卷盘',
      goodCreateTime: '2020-11-13 09:40',
      goodUpdateTime: '2024-12-08 10:28',
    },
    {
      id: '5',
      goodName: '便携式12.1寸机器人多功能控制地面工作站',
      goodCode: 'CT7121A0001',
      goodSpec: 'SD7121A1,SD7121A1-MAS-000',
      goodUnit: 'Pcs',
      goodClassify: '产成品-计算机控制终端',
      goodCreateTime: '2020-07-29 19:52',
      goodUpdateTime: '2024-12-08 10:28',
    },
    {
      id: '6',
      goodName: '排水管道病害健康评估及数据（报告）管理软件',
      goodCode: 'CSA001A0001',
      goodSpec: 'SDA001A1',
      goodUnit: 'Pcs',
      goodClassify: '产成品-平台软件',
      goodCreateTime: '2020-08-01 19:50',
      goodUpdateTime: '2024-12-08 10:28',
    },
    {
      id: '7',
      goodName: '10寸一体机',
      goodCode: 'CW000001228',
      goodSpec: '10寸,',
      goodUnit: 'Pcs',
      goodClassify: '产成品-外购产成品',
      goodCreateTime: '2024-04-15 13:56',
      goodUpdateTime: '2024-12-08 10:28',
    },
    {
      id: '8',
      goodName: '110无刷外转子力矩电机',
      goodCode: 'CM000000001',
      goodSpec: 'SDM11064W,SDM11064W-MAS-000',
      goodUnit: 'Pcs',
      goodClassify: '产成品-无刷力矩电机',
      goodCreateTime: '2021-09-07 14:03',
      goodUpdateTime: '2024-12-08 10:28',
    },
    {
      id: '9',
      goodName: '120防水伺服电机',
      goodCode: 'CM000000013',
      goodSpec: 'SDM12072ZA1,SDM12072ZA1-MAS-000',
      goodUnit: 'Pcs',
      goodClassify: '产成品-无刷力矩电机',
      goodCreateTime: '2023-03-27 11:03',
      goodUpdateTime: '2024-12-08 10:28',
    },
    {
      id: '10',
      goodName: '100mm刀片式实心轮',
      goodCode: 'CAA8100A001',
      goodSpec: 'SD9902LD6-MAS-010c',
      goodUnit: 'Pcs',
      goodClassify: '产成品-配件-轮子',
      goodCreateTime: '2020-07-29 19:52',
      goodUpdateTime: '2024-12-08 10:28',
    },
    {
      id: '11',
      goodName: '1米手动升降架',
      goodCode: 'CAB8228A001',
      goodSpec: 'SD8228A,SD8228A-MAS-000',
      goodUnit: 'Pcs',
      goodClassify: '产成品-配件-升降架(机械臂）',
      goodCreateTime: '2023-02-09 09:09',
      goodUpdateTime: '2024-12-08 10:28',
    },
    {
      id: '12',
      goodName: 'S190A2履带拓展底盘',
      goodCode: 'CAC8224A001',
      goodSpec: 'SD8224A,',
      goodUnit: 'Pcs',
      goodClassify: '产成品-配件-拓展底盘',
      goodCreateTime: '2021-11-24 10:50',
      goodUpdateTime: '2024-12-08 10:28',
    },
  ]

  // 选择的列表
  const selectList = ref<DataConnectTable>([])

  // 表格组件实例
  const tableInstance = ref<TableInstance | null>(null)

  /**
   * 隐藏弹窗
   */
  const hideDialog = () => {
    visible.value = false
  }

  /**
   * 确定点击事件
   */
  const onConfirm = () => {
    hideDialog()
    emits('update', _.cloneDeep(selectList.value))
    selectList.value.length = 0
  }

  /**
   * 当选择项发生变化时会触发该事件
   * @param {DataConnectTable} _list - 选择的列表
   */
  const handleSelectionChange = (_list: DataConnectTable) => {
    selectList.value = _.cloneDeep(_list)
  }

  /**
   * 单选选择事件
   * @param {number} val - 行索引
   */
  const handleRadioChange = (val: number) => {
    if (tableInstance.value) {
      selectList.value = [list[val]]
    }
  }

  defineExpose({
    setSelectedRow: (selectRowIds: Array<string>) => {
      nextTick(() => {
        if (tableInstance.value) {
          tableInstance.value.clearSelection()

          list.forEach((data) => {
            selectRowIds.forEach((selectRowId) => {
              if (selectRowId === data.id) {
                tableInstance.value.toggleRowSelection(data, true)
              }
            })
          })
        }
      })
    },
  })
</script>

<template>
  <h-dialog v-model="visible" title="产品选择" :width="800" @close="hideDialog">
    <el-table
      ref="tableInstance"
      :border="true"
      :data="list"
      max-height="450"
      :stripe="true"
      @selection-change="handleSelectionChange"
    >
      <!--选择（多选）-->
      <el-table-column
        v-if="props.selectMode === 1"
        width="50"
        type="selection"
        :align="'center'"
        fixed="left"
      />

      <!-- 选择（单选） -->
      <el-table-column v-if="props.selectMode === 2" width="50" :align="'center'" fixed="left">
        <template #default="{ row, $index }">
          <el-radio-group :model-value="selectList[0] ? selectList[0].id : ''">
            <el-radio :value="row.id" @change="handleRadioChange($index)"></el-radio>
          </el-radio-group>
        </template>
      </el-table-column>

      <!-- 序号 -->
      <el-table-column type="index" width="50" :align="'center'" fixed="left" label="序号" />

      <!-- 产品名称 -->
      <el-table-column
        v-if="props.showFieldList.includes('goodName')"
        label="产品名称"
        prop="goodName"
        show-overflow-tooltip
        width="140"
      />

      <!-- 产品编号 -->
      <el-table-column
        v-if="props.showFieldList.includes('goodCode')"
        label="产品名称"
        prop="goodCode"
        show-overflow-tooltip
        width="140"
      />

      <!-- 产品规格 -->
      <el-table-column
        v-if="props.showFieldList.includes('goodSpec')"
        label="产品规格"
        prop="goodSpec"
        show-overflow-tooltip
        width="140"
      />

      <!-- 产品单位 -->
      <el-table-column
        v-if="props.showFieldList.includes('goodUnit')"
        label="产品单位"
        prop="goodUnit"
        show-overflow-tooltip
        width="140"
      />

      <!-- 产品分类 -->
      <el-table-column
        v-if="props.showFieldList.includes('goodClassify')"
        label="产品分类"
        prop="goodClassify"
        show-overflow-tooltip
        width="140"
      />

      <!-- 产品创建时间 -->
      <el-table-column
        v-if="props.showFieldList.includes('goodCreateTime')"
        label="产品创建时间"
        prop="goodCreateTime"
        show-overflow-tooltip
        width="140"
      />

      <!-- 产品更新时间 -->
      <el-table-column
        v-if="props.showFieldList.includes('goodUpdateTime')"
        label="产品更新时间"
        prop="goodUpdateTime"
        show-overflow-tooltip
        width="140"
      />
    </el-table>

    <template #footer>
      <h-button is-modal type="primary" @click="onConfirm">确定</h-button>
      <h-button is-modal @click="hideDialog">取消</h-button>
    </template>
  </h-dialog>
</template>

<style scoped lang="scss"></style>
